<template>
  <div class="departments-container">
    <div class="app-container">
      <!-- 
        el-card: 带盒子阴影的div
      -->
      <el-card class="tree-card" v-loading="loading">
        <!-- 
          行列布局: el-row + el-col
          ElementUI中：
            el-row: 1行24列，内部是通过浮动布局的
            el-col:
              span: 控制每列占 el-row 宽度的百分比
        -->
        <!-- 
          el-tree: 树形组件，用于清晰层级关系的组件
            data: 数据源（对象数组）
              对象的结构：
                label: 显示的文字
                children: 是否存在子节点
            props: 约定展示字段的名称，默认值是 label 和 children
         -->
        <tree-item
          :item="companyObj"
          class="root-tree-node"
          @on-add-click="onAddClick"
        />
        <!-- 部门属性结构 -->
        <el-tree :data="deptTreeData" :props="defaultProps" default-expand-all>
          <template #default="{ data }">
            <tree-item
              :item="data"
              @on-add-click="onAddClick"
              @on-edit-click="onEditClick"
              @on-del-success="getDeptList"
            />
          </template>
        </el-tree>
      </el-card>
      <!-- 添加或编辑部门组件 -->
      <add-or-edit-dept
        ref="addOrEditDeptRef"
        :isShow="visible"
        :deptData="deptObj"
        @on-close="visible = false"
        @on-add-success="getDeptList"
        :deptList="deptList"
      />
    </div>
  </div>
</template>

<script>
import { getDeptListAPI } from "@/api/departments";
import { list2Tree } from "@/utils/transform";
import TreeItem from "./components/tree-item.vue";
import AddOrEditDept from "./add-or-edit-dept.vue";
export default {
  name: "Departments",
  components: {
    TreeItem,
    AddOrEditDept,
  },
  data() {
    return {
      // 部门列表数据
      deptList: [],
      // 部门树形数据
      deptTreeData: [],
      // 配置树形组件映射的属性
      defaultProps: {
        label: "name",
        children: "children",
      },
      // 公司对象
      companyObj: {
        name: "",
        manager: "负责人",
        id: "",
      },
      // 控制子组件对话框的可见性
      visible: false,
      // 当前操作的部门对象
      deptObj: {},
      // 控制加载状态，true表示加载中；否则加载结束
      loading: true,
    };
  },
  created() {
    this.getDeptList();
  },
  methods: {
    // 获取部门信息
    async getDeptList() {
      // 发请请求之前，把loading设置true
      this.loading = true;
      const { data } = await getDeptListAPI();
      // 给公司对象添加名字
      this.companyObj.name = data.companyName;
      // 存储一份部门列表结构
      this.deptList = data.depts;
      // 思想：数据预处理（后台返回的数据不是我们需要的格式，需要做进一步处理才可用）
      this.deptTreeData = list2Tree(data.depts);
      // 加载结束
      this.loading = false;
    },
    // 接到添加子部门点击时
    onAddClick(item) {
      // 1. visible设置为true，让添加面板显示
      this.visible = true;
      // 2. 保存子传递的部门对象
      this.deptObj = item;
    },
    // 接到编辑部门点击时
    onEditClick(item) {
      // 1. visible设置为true，让编辑面板显示
      this.visible = true;
      // 2. 保存子传递的部门对象
      this.deptObj = item;
      // 3. 调用子组件获取部门详情的方法
      // 在父中想调子的方法：借助 ref + $refs
      // this.visible设置为true，会让弹框组件显示
      // 但vue中数据变了，组件的更新是异步的，子组件中
      // deptData并没有立即同步，想调用数据更新后的方法，
      // 建议用 this.$nextTick()包裹一下
      this.$nextTick(() => {
        this.$refs.addOrEditDeptRef.getDeptDetail();
      });
    },
  },
};
</script>

<style scoped lang="scss">
.tree-card {
  padding: 30px;
  font-size: 16px;
  .el-dropdown {
    font-size: 16px;
    .el-dropdown-menu__item {
      font-size: 16px !important;
    }
  }
  .el-row {
    width: 100%;
  }
  .root-tree-node {
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
  }
}
.el-tree {
  ::v-deep {
    // 小三角的样式, 去掉默认的小三角的旋转效果
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    // 有子节点 且未展开 +
    .el-icon-caret-right:before {
      background: url("~@/assets/common/add-circle.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 有子节点 且已展开 -
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
      background: url("~@/assets/common/minus-circle.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
    // 没有子节点
    .el-tree-node__expand-icon.is-leaf::before {
      background: url("~@/assets/common/user-filling.png") no-repeat 0 0;
      content: "";
      display: block;
      width: 16px;
      height: 16px;
      font-size: 16px;
      background-size: 16px;
    }
  }
}
</style>
